<template>
  <div class="Category">
    <nav-bar class="nav-bar">
      <div slot="center">分类</div>
    </nav-bar>

    <!--左侧滚动区域-->
    <common-scroll class="container1">
      <category-left-nav @itemClick="itemClick" :categorys="categorys" />
    </common-scroll>
    <!--右侧滚动区域-->
    <common-scroll ref="scroll" class="container2">
      <category-grid-view :cols="4" :subcategory="subcategory" />
      <tab-control @currentindex="clickindex" :titles="Object.values(types)" />
      <goods-list :list="goods[currentType].list" />
    </common-scroll>
  </div>
</template>

<script>
import {
  reqCategory,
  reqSubcategory,
  reqCategoryDetail
} from "network/category";

import { debounce } from "@/common/utils/debounce.js";

import CategoryLeftNav from "./base/LeftNav";
import CategoryGridView from "./base/GridView";

import TabControl from "components/content/tabcontrol/TabControl";
import GoodsList from "components/content/goodslist/GoodsList";
export default {
  name: "Category",
  data() {
    return {
      categorys: [], //存储左侧滚动区域的数据
      subcategory: [], //储存右侧subcategory(顶部)的数据
      currentIndex: 0,
      currentType: "pop",
      // typeList:['pop','new','sell'],  //定义商品类型的数据
      types: {
        pop: "综合",
        new: "新款",
        sell: "销量"
      },
      goods: {
        pop: {
          list: []
        },
        new: {
          list: []
        },
        sell: {
          list: []
        }
      }
    };
  },
  mounted() {
    var refresh = debounce(this.$refs.scroll.refresh, 500);
    // 使用事件总线传递事件，监听图片加载完成后刷新better-scroll
    this.$bus.$on("itemimgload", () => {
      refresh();
    });
  },
  created() {
    this.getCategory();
  },
  components: {
    CategoryLeftNav,
    CategoryGridView,
    TabControl,
    GoodsList
  },
  methods: {
    itemClick(index) {
      if (index === this.currentIndex) return;
      this.currentIndex = index;
      //获取右侧上两部分的数据
      this.getSubcategory();
      //请求右侧下面的数据  用于渲染GoodsList  基于指定商品的miniWallkey
      // this.getSubCategoryDetail('pop')  //请求pop类型的数据
      // this.getSubCategoryDetail('sell')  //请求pop类型的数据
      // this.getSubCategoryDetail('new')  //请求pop类型的数据
      // Object.keys(this.types).forEach(type=> this.getSubCategoryDetail(type))
      Object.keys(this.types).forEach(this.getSubCategoryDetail);
    },

    // tab切换触发的函数
    clickindex(index) {
      this.currentType = Object.keys(this.types)[index];
    },
    async getCategory() {
      const result = await reqCategory();
      //左侧滚动区域的数据
      this.categorys = result.data.data.category.list;
      //请求右侧上面的数据 用于渲染CategoryGridView 基于指定商品的maitKey
      this.getSubcategory();
      //请求右侧下面的数据  用于渲染GoodsList  基于指定商品的miniWallkey
      // this.getSubCategoryDetail('pop')  //请求pop类型的数据
      // this.getSubCategoryDetail('sell')  //请求pop类型的数据
      // this.getSubCategoryDetail('new')  //请求pop类型的数据
      // Object.keys(this.types).forEach(type=> this.getSubCategoryDetail(type))
      Object.keys(this.types).forEach(this.getSubCategoryDetail);
    },
    async getSubcategory() {
      const { maitKey } = this.categorys[this.currentIndex];
      const result = await reqSubcategory(maitKey);
      this.subcategory = result.data.data.list;
    },
    async getSubCategoryDetail(type) {
      const { miniWallkey } = this.categorys[this.currentIndex];
      const result = await reqCategoryDetail(miniWallkey, type);
      this.goods[type].list = result.data
        .map(item => {
          return {
            show: {
              img: item.img
            },
            title: item.title,
            price: item.price,
            cfav: item.cfav,
            iid: item.iid
          };
        })
        .slice(0, 12);
    }
  }
};
</script>

<style scoped>
.nav-bar {
  background-color: rgb(255, 87, 119);
  font-weight: bold;
  color: #fff;
}

.container1 {
  position: fixed;
  top: 44px;
  bottom: 49px;
  width: 100px;
  overflow: hidden;
}

.container2 {
  position: fixed;
  top: 44px;
  bottom: 49px;
  right: 0;
  left: 100px;
  overflow: hidden;
}
</style>
